import BiHeader from './components/BiHeader';
import KLine from './components/KLine';
import Order from './Order';
import styles from './index.module.less';
import SubmitOrder from './SubmitOrder';
import TradeTab from './TradeTab';
import Property from './components/Property';
import { useEffect, useState } from 'react';
import useRoute from '@/hooks/useRoute';
import useScreenSize from '@/hooks/useScreenSize';
import { useSetAtom } from 'jotai';
import { pageLeftWidthAtom } from '@/stores';
import { isLocal } from '@/utils';

const rightWidth = 272; // 页面右侧区域宽度
const gap = 6; // 间隔
export default function Home() {
  const screenWidth = useScreenSize().width;
  const { getPageParams } = useRoute();
  const [contract, setContract] = useState(null);
  const setPageLeftWidth = useSetAtom(pageLeftWidthAtom);

  useEffect(() => {
    const contract: any = getPageParams('contract');
    setContract(contract);
    if (!contract) window.location.href = `/home?contract=BTC_USDT`;
  }, []);

  useEffect(() => {
    const _leftWidth = screenWidth - rightWidth;
    const minLeftWidth = 1200 - 3 * gap - rightWidth; // 页面左边最小宽度
    setPageLeftWidth(_leftWidth < minLeftWidth ? minLeftWidth : _leftWidth);
  }, [screenWidth]);

  return (
    <div className={`${styles.homePage}`}>
      {contract && (
        <>
          <BiHeader contract={contract} />
          <div className={`${styles.pageconwrap}`}>
            <div className={`${styles.conleft} ${styles.klinout}`}>
              {!isLocal() && (
                <>
                  <KLine />
                  <TradeTab />
                </>
              )}
            </div>
            <div className={`${styles.conright} pageRightWidth`}>
              <SubmitOrder />
            </div>
          </div>
          <div className={`${styles.pageconwrap} ${styles.pageconwrapBig}`}>
            <div className={` ${styles.conInno}`}>
              <Order />
            </div>
            {/*
            <div className={`${styles.conleft}`}>
              <Order />
            </div>
             <div className={`${styles.conright} pageRightWidth`}>
              <Property />
            </div> */}
          </div>
        </>
      )}
    </div>
  );
}
